﻿@model TailSpin.SpaceGame.Web.Models.LeaderboardViewModel
@{
    ViewData["Title"] = "Home Page";
}
<section class="intro">
    <div class="container">
        <img class="title" src="/images/space-game-title.svg" alt="Space Game">
        <p>An example site for learning</p>
    </div>
</section>
<section class="download">
    <div class="image-cap"></div>
    <div class="container">
        <a href="" class="btn btn-default btn-lg" data-toggle="modal" data-target="#pretend-modal">Download game</a>
    </div>
</section>

<!-- Screenshots -->
<section class="screens">
    <div class="container">
        <ul>
            <li><a href="" data-toggle="modal" data-target=".pic-01"><img src="/images/space-game-placeholder.svg" alt=""></a></li>
            <li><a href="" data-toggle="modal" data-target=".pic-01"><img src="/images/space-game-placeholder.svg" alt=""></a></li>
            <li><a href="" data-toggle="modal" data-target=".pic-01"><img src="/images/space-game-placeholder.svg" alt=""></a></li>
            <li><a href="" data-toggle="modal" data-target=".pic-01"><img src="/images/space-game-placeholder.svg" alt=""></a></li>
        </ul>
    </div>
</section>

<!-- Leaderboard -->
<section class="leaderboard">
    <div class="container">
        <a name="leaderboard"></a>
        <h2>Space leaders</h2>
        <!-- Start Leaderboard table -->
        <div class="row">
            <div class="col-sm-9 leader-scores">
                <div class="row high-score hidden-xs">
                    <div class="col-sm-1">
                        Rank
                    </div>
                    <div class="col-sm-4">
                        Player
                    </div>
                    <div class="col-sm-2">
                        Mode
                    </div>
                    <div class="col-sm-3">
                        Galaxy
                    </div>
                    <div class="col-sm-2">
                        Score
                    </div>
                </div>

                @{
                    if (Model.Scores.Count() == 0)
                    {
                        <div class="row" style="margin-left: 5px; margin-top: 20px;">No scores match your selection.</div>
                    }

                    int rank = ((Model.Page - 1) * Model.PageSize) + 1;
                    foreach (var score in Model.Scores)
                    {
                        <div class="row high-score align-items-center">
                            <div class="col-sm-1 score-data">
                                @(rank++).
                            </div>
                            <div class="col-sm-4 score-data">
                                <div style="text-align: left; margin-left: 100px;">
                                    <partial name="Profile" model="new ProfileViewModel { Profile = score.Profile, Rank = (rank - 1).ToString() }" />
                                    <a href="" data-toggle="modal" data-target="#profile-modal-@((rank - 1).ToString())">
                                        <img class="avatar" src="@score.Profile.AvatarUrl" alt="@score.Profile.UserName">
                                        <div class="score-data username">
                                            @score.Profile.UserName
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-2 score-data">
                                @score.Score.GameMode
                            </div>
                            <div class="col-sm-3 score-data">
                                @score.Score.GameRegion
                            </div>
                            <div class="col-sm-2 score-data">
                                @score.Score.HighScore.ToString("N0")
                            </div>
                        </div>
                    }
                }
                <nav aria-label="...">
                    <ul class="pagination">
                        @if (string.IsNullOrEmpty(Model.PrevLink))
                        {
                            <li class="disabled"><span aria-hidden="true">&laquo;</span></li>
                        }
                        else
                        {
                            <li class=""><a href="@Model.PrevLink" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                        }
                        @{
                            var totalPages = Model.TotalResults / Model.PageSize;
                            if (Model.TotalResults % Model.PageSize != 0)
                            {
                                totalPages++;
                            }

                            for (int i = 1; i <= totalPages; i++)
                            {
                                <li class="@(i == Model.Page ? "active" : null)">
                                    <a href="@($"/?page={i}&pageSize={@Model.PageSize}&mode={@Model.SelectedMode}&region={@Model.SelectedRegion}")#leaderboard">
                                        @i
                                        <span class="sr-only">(current)</span>
                                    </a>
                                </li>
                            }
                        }
                        @if (string.IsNullOrEmpty(Model.NextLink))
                        {
                            <li class="disabled"><span aria-hidden="true">&raquo;</span></li>
                        }
                        else
                        {
                            <li class=""><a href="@Model.NextLink" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                        }
                    </ul>
                </nav>
            </div>

            <div class="col-sm-3">
                <div class="leader-nav hidden-xs">
                    <div class="row nav-buttons">
                        <h4>Mode</h4>
                        <ul>
                            @if (string.IsNullOrEmpty(Model.SelectedMode))
                            {
                                <li class="filter-active">All</li>
                            }
                            else
                            {
                                <li class="filter-button">
                                    <a class="" href="/?region=@Model.SelectedRegion#leaderboard">All</a>
                                </li>
                            }
                            @{
                                foreach (var mode in Model.GameModes)
                                {
                                    @if (mode.Equals(Model.SelectedMode))
                                    {
                                        <li class="filter-active">@mode</li>
                                    }
                                    else
                                    {
                                        <li class="filter-button"><a href="/?mode=@mode&region=@Model.SelectedRegion#leaderboard">@mode</a></li>
                                    }
                                }
                            }
                        </ul>
                    </div>

                    <div class="row nav-buttons">
                        <h4>Galaxy</h4>
                        <ul>
                            @if (string.IsNullOrEmpty(Model.SelectedRegion))
                            {
                                <li class="filter-active">All</li>
                            }
                            else
                            {
                                <li class="filter-button"><a href="/?mode=@Model.SelectedMode#leaderboard">All</a></li>
                            }

                            @{
                                foreach (var region in Model.GameRegions)
                                {
                                    @if (region.Equals(Model.SelectedRegion))
                                    {
                                        <li class="filter-active">@region</li>
                                    }
                                    else
                                    {
                                        <li class="filter-button"><a href="/?mode=@Model.SelectedMode&region=@region#leaderboard">@region</a></li>
                                    }
                                }
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Leaderboard -->
    </div>
</section>

<!-- About section -->
<section class="about">
    <h2>More about Space Game</h2>
    <p>Space Game is an example website for learning purposes. Check out <a href="https://aka.ms/mslearndevops/">Microsoft Learn</a> to find out more.</p>
</section>
<section class="social">
    <div class="container">
        <div class="share">
            <ul>
                <li><a href="" data-toggle="modal" data-target=".social-media"><img src="/images/space-game-placeholder.svg" alt="" /></a></li>
                <li><a href="" data-toggle="modal" data-target=".social-media"><img src="/images/space-game-placeholder.svg" alt="" /></a></li>
                <li><a href="" data-toggle="modal" data-target=".social-media"><img src="/images/space-game-placeholder.svg" alt="" /></a></li>
            </ul>
        </div>
    </div>
    <p>&copy; @DateTime.Now.Year - TailSpin Toys</p>
</section>


<!-- Modals -->
<div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header no-border">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                modal
            </div>
        </div>
    </div>
</div>

<!-- Pic modals -->
<div class="modal fade pic-01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header no-border">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-center">
                <img src="/images/space-game-placeholder.svg" width="100%" alt="">
                <p>Gamescreen example</p>
            </div>
        </div>
    </div>
</div>

<!-- Social -->
<div class="modal fade social-media" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header no-border">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-center">
                Social media example
            </div>
        </div>
    </div>
</div>

<!-- Dead end modal -->
<div class="modal fade" id="pretend-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header no-border">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-center">
                This link is for example purposes and goes nowhere. 😐
            </div>
        </div>
    </div>
</div>